<template>
  <div id="app">
    一起学习axios
    <div>
      <button @click="goHello">hello组件</button>
    </div>
    <router-view/>
  </div>
</template>

<script>

// 引入axios
import axios from 'axios'

export default {
  name: 'app',
  created () {

    // axios的方法请百度文档，看云

    // axios默认为get方式
    // axios({
    //   method: 'get',
    //   url: 'https://www.easy-mock.com/mock/5a3ca2f3fb6fe310cf6abc94/vue/axios-get',
    // })
    //   .then((response) => {
    //     console.log(response.data.data);
    //   })
    //   .catch((error) => {
    //     console.log(error);
    //   })

    // axios({
    //   method: 'post',
    //   url: 'https://www.easy-mock.com/mock/5a3ca2f3fb6fe310cf6abc94/vue/axios-post',
    // })
    //   .then((response) => {
    //     console.log(response.data.data);
    //   })
    //   .catch((error) => {
    //     console.log(error);
    //   })


    // 我们可以直接调用axios下的get等方法
    // axios.get('https://www.easy-mock.com/mock/5a3ca2f3fb6fe310cf6abc94/vue/axios-get')
    //   .then((response) => {
    //     console.log(response.data.data);
    //   })
    //   .catch((error) => {
    //     console.log(error);
    //   })

    // axios.post('https://www.easy-mock.com/mock/5a3ca2f3fb6fe310cf6abc94/vue/axios-post')
    //   .then((response) => {
    //     console.log(response.data.data);
    //   })
    //   .catch((error) => {
    //     console.log(error);
    //   })

    // axios.delete('https://www.easy-mock.com/mock/5a3ca2f3fb6fe310cf6abc94/vue/axios-delete')
    //   .then((response) => {
    //     console.log(response.data.data);
    //   })
    //   .catch((error) => {
    //     console.log(error);
    //   })


    // axios发送请求如何传参，请在浏览器中查看
    axios.get('https://www.easy-mock.com/mock/5a3ca2f3fb6fe310cf6abc94/vue/axios-get',{
      params: {
        keys: 'values'
      }
    })
      .then((response) => {
        // console.log(response.data.data);
      })
      .catch((error) => {
        // console.log(error);
      })

    axios.post('https://www.easy-mock.com/mock/5a3ca2f3fb6fe310cf6abc94/vue/axios-post',{
      params: {
        userId: 'amundsen'
      }
    })
      .then((response) => {
        // console.log(response.data.data);
      })
      .catch((error) => {
        // console.log(error);
      })


  },
  methods: {
    goHello(){
      this.$router.push({name: 'hello'})
    }
  }



}
</script>

<style>
#app {
  text-align: center;
}
</style>
